
<!--这里写html代码-->
<template>
  <el-table :data="userList" stripe style="width: 100%">
    <el-table-column prop="id" label="ID" width="180" />
    <el-table-column prop="nick" label="昵称" width="180" />
    <el-table-column  label="密码" > <!--这里不显示密码-->
      <template #default="scope">
        ******
      </template>
    </el-table-column>
    <el-table-column prop="sex" label="性别" />
    <el-table-column prop="phone" label="手机" />
    <el-table-column prop="email" label="邮箱" />
    <el-table-column prop="address" label="住址" />
    <el-table-column prop="createTime" label="创建时间" />
    <el-table-column prop="updateTime" label="更新时间" />
    <el-table-column label="操作">
      <template #default="scope">
        <div class="action-links">
          <a href="javascript:void(0)" @click="download(scope.row.id)" class="action-link">下载合同</a>
          <a :href="'/edit/'+scope.row.id" class="action-link">编辑用户</a>
          <a href="javascript:void(0)" @click="delUser(scope.row.id)" class="action-link">删除用户</a>
        </div>
      </template>
    </el-table-column>

  </el-table>
</template>

<!--这里写JavaScript代码-->
<script setup>
import {doDelete, doGet} from "../http/httpRequest.js";
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

let userList = ref([{}]);

// 页面加载时执行(如果不写这个代码，下面的getData方法不会执行)
onMounted(() => {
  getData();
});


function getData(){
  //在httpRequest.js中设置了URL的前缀，所以这里直接写后缀就行
  doGet("/api/users", {}).then((res) => {
    //处理成功
    console.log(res);
    // 将获取的数据赋值给userList,不要写成userList = res.data.data
    userList.value = res.data.data;//res.data == 获取请求返回的R对象      res.data.data == 获取R对象中的data字段信息
  }).catch((err) => {
    //处理失败
    console.log(err);
  }).finally(() => {
    //总是会执行的代码
  })
}

//使用iframe下载文件
function download(id) {
  let iframe = document.createElement("iframe");
  iframe.src = axios.defaults.baseURL + "api/download/" + id;
  iframe.style.display = "none";
  document.body.appendChild(iframe);
}

function delUser(id) {
  doDelete("/api/delete/" + id, {}).then(resp => {
    if (resp.data.code === 200) {
      //删除成功，提示一下
      ElMessage({
        showClose: true,
        message: '删除成功',
        type: 'success',
      })
      // 延迟2秒刷新页面
      setTimeout(() => {
        window.location.reload();
      }, 2000);
    } else {
      //删除失败，提示一下
      ElMessage({
        showClose: true,
        message: '删除失败',
        type: 'error',
      })
    }
  })
}
</script>

<style scoped>.action-links {
  display: flex;
  flex-direction: column;
}

.action-link {
  margin-bottom: 5px; /* 可以根据需要调整间距 */
}
</style>


